<!DOCTYPE html>
<!-- saved from url=(0050)http://concours.open-du-web.fr/epreuves/epreuve/21 -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>Epreuve - Interface du concours des Open du Web</title>
    <link rel="stylesheet" type="text/css" href="./Epreuve - Interface du concours des Open du Web_files/css.php" media="screen">
<link rel="stylesheet" type="text/css" href="./Epreuve - Interface du concours des Open du Web_files/css(1).php" media="screen">
<link rel="stylesheet" type="text/css" href="./Epreuve - Interface du concours des Open du Web_files/css(2).php" media="screen">
<link rel="stylesheet" type="text/css" href="./Epreuve - Interface du concours des Open du Web_files/css(3).php" media="screen">
<link rel="stylesheet" type="text/css" href="./Epreuve - Interface du concours des Open du Web_files/css(4).php" media="print">
    <meta name="description" content="Open du Web">
    	<link rel="shortcut icon" type="image/x-icon" href="http://concours.open-du-web.fr/images/favicon.png">
	    <script type="text/javascript">
    var baseUrl = 'http://concours.open-du-web.fr';
    var module = 'epreuves';
    var reqvars = 'epreuves/epreuve/21';
    var finChronoInterface = 'December 06, 2012 21:14:06';
    var finChronoInterfaceJury = 'December 06, 2012 22:14:06';
    </script>
    <script type="text/javascript" src="./Epreuve - Interface du concours des Open du Web_files/js.php"></script>
<script type="text/javascript" src="./Epreuve - Interface du concours des Open du Web_files/js(1).php"></script>
<script type="text/javascript" src="./Epreuve - Interface du concours des Open du Web_files/js(2).php"></script>


    <script type="text/javascript" src="./Epreuve - Interface du concours des Open du Web_files/jquery.jcountdown1.4.min.js"></script>
    <link rel="shortcut icon" href="http://concours.open-du-web.fr/images/odw.ico">
    <style id="wrc-middle-css" type="text/css">.wrc_whole_window{	display: none;	position: fixed; 	z-index: 2147483647;	background-color: rgba(40, 40, 40, 0.9);	word-spacing: normal !important;	margin: 0px !important;	padding: 0px !important;	border: 0px !important;	left: 0px;	top: 0px;	width: 100%;	height: 100%;	line-height: normal !important;	letter-spacing: normal !important;	overflow: hidden;}.wrc_bar_window{	display: none;	position: fixed; 	z-index: 2147483647;	background-color: rgba(60, 60, 60, 1.0);	word-spacing: normal !important;	font-family: Segoe UI, Arial Unicode MS, Arial, Sans-Serif;	margin: 0px !important;	padding: 0px !important;	border: 0px !important;	left: 0px;	top: 0px;	width: 100%;	height: 40px;	line-height: normal !important;	letter-spacing: normal !important;	color: white !important;	font-size: 13px !important;}.wrc_middle {	display: table-cell;	vertical-align: middle;	width: 100%;}.wrc_middle_main {	font-family: Segoe UI, Arial Unicode MS, Arial, Sans-Serif;	font-size: 14px;	width: 600px;	height: auto;    background: url(chrome-extension://icmlaeflemplmjndnaapfdbbnpncnbda/skin/images/background-body.jpg) repeat-x left top;	background-color: rgb(39, 53, 62);	position: relative;	margin-left: auto;	margin-right: auto;	text-align: left;}.wrc_middle_tq_main {	font-family: Segoe UI, Arial Unicode MS, Arial, Sans-Serif;	font-size: 16px;	width: 615px;	height: 460px;    background: url(chrome-extension://icmlaeflemplmjndnaapfdbbnpncnbda/skin/images/background-sitecorrect.png) no-repeat;	background-color: white;	color: black !important;	position: relative;	margin-left: auto;	margin-right: auto;	text-align: center;}.wrc_middle_logo {    background: url(chrome-extension://icmlaeflemplmjndnaapfdbbnpncnbda/skin/images/logo.jpg) no-repeat left bottom;    width: 140px;    height: 42px;    color: orange;    display: table-cell;    text-align: right;    vertical-align: middle;}.wrc_icon_warning {	margin: 20px 10px 20px 15px;	float: left;	background-color: transparent;}.wrc_middle_title {    color: #b6bec7;	height: auto;    margin: 0px auto;	font-size: 2.2em;	white-space: nowrap;	text-align: center;}.wrc_middle_hline {    height: 2px;	width: 100%;    display: block;}.wrc_middle_description {	text-align: center;	margin: 15px;	font-size: 1.4em;	padding: 20px;	height: auto;	color: white;	min-height: 3.5em;}.wrc_middle_actions_main_div {	margin-bottom: 15px;	text-align: center;}.wrc_middle_actions_blue_button div {	display: inline-block;	width: auto;	cursor: Pointer;	margin: 3px 10px 3px 10px;	color: white;	font-size: 1.2em;	font-weight: bold;}.wrc_middle_actions_blue_button {	-moz-appearance: none;	border-radius: 7px;	-moz-border-radius: 7px/7px;	border-radius: 7px/7px;	background-color: rgb(0, 173, 223) !important;	display: inline-block;	width: auto;	cursor: Pointer;	border: 2px solid #00dddd;	padding: 0px 20px 0px 20px;}.wrc_middle_actions_blue_button:hover {	background-color: rgb(0, 159, 212) !important;}.wrc_middle_actions_blue_button:active {	background-color: rgb(0, 146, 200) !important;	border: 2px solid #00aaaa;}.wrc_middle_actions_grey_button div {	display: inline-block;	width: auto;	cursor: Pointer;	margin: 3px 10px 3px 10px;	color: white !important;	font-size: 15px;	font-weight: bold;}.wrc_middle_actions_grey_button {	-moz-appearance: none;	border-radius: 7px;	-moz-border-radius: 7px/7px;	border-radius: 7px/7px;	background-color: rgb(100, 100, 100) !important;	display: inline-block;	width: auto;	cursor: Pointer;	border: 2px solid #aaaaaa;	text-decoration: none;	padding: 0px 20px 0px 20px;}.wrc_middle_actions_grey_button:hover {	background-color: rgb(120, 120, 120) !important;}.wrc_middle_actions_grey_button:active {	background-color: rgb(130, 130, 130) !important;	border: 2px solid #00aaaa;}.wrc_middle_action_low {	font-size: 0.9em;	white-space: nowrap;	cursor: Pointer;	color: grey !important;	margin: 10px 10px 0px 10px;	text-decoration: none;}.wrc_middle_action_low:hover {	color: #aa4400 !important;}.wrc_middle_actions_rest_div {	padding-top: 5px;	white-space: nowrap;	text-align: center;}.wrc_middle_action {	white-space: nowrap;	cursor: Pointer;	color: red !important;	font-size: 1.2em;	margin: 10px 10px 0px 10px;	text-decoration: none;}.wrc_middle_action:hover {	color: #aa4400 !important;}</style><script id="wrc-script-middle_window" type="text/javascript" language="JavaScript">var g_inputsCnt = 0;var g_InputThis = new Array(null, null, null, null);var g_alerted = false;/* we test the input if it includes 4 digits   (input is a part of 4 inputs for filling the credit-card number)*/function is4DigitsCardNumber(val){	var regExp = new RegExp('[0-9]{4}');	return (val.length == 4 && val.search(regExp) == 0);}/* testing the whole credit-card number 19 digits devided by three '-' symbols or   exactly 16 digits without any dividers*/function isCreditCardNumber(val){	if(val.length == 19)	{		var regExp = new RegExp('[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}');		return (val.search(regExp) == 0);	}	else if(val.length == 16)	{		var regExp = new RegExp('[0-9]{4}[0-9]{4}[0-9]{4}[0-9]{4}');		return (val.search(regExp) == 0);	}	return false;}function CheckInputOnCreditNumber(self){	if(g_alerted)		return false;	var value = self.value;	if(self.type == 'text')	{		if(is4DigitsCardNumber(value))		{			var cont = true;			for(i = 0; i < g_inputsCnt; i++)				if(g_InputThis[i] == self)					cont = false;			if(cont && g_inputsCnt < 4)			{				g_InputThis[g_inputsCnt] = self;				g_inputsCnt++;			}		}		g_alerted = (g_inputsCnt == 4);		if(g_alerted)			g_inputsCnt = 0;		else			g_alerted = isCreditCardNumber(value);	}	return g_alerted;}function CheckInputOnPassword(self){	if(g_alerted)		return false;	var value = self.value;	if(self.type == 'password')	{		g_alerted = (value.length > 0);	}	return g_alerted;}function onInputBlur(self, bRatingOk, bFishingSite){	var bCreditNumber = CheckInputOnCreditNumber(self);	var bPassword = CheckInputOnPassword(self);	if((!bRatingOk || bFishingSite == 1) && (bCreditNumber || bPassword) )	{		var warnDiv = document.getElementById("wrcinputdiv");		if(warnDiv)		{			/* show the warning div in the middle of the screen */			warnDiv.style.left = "0px";			warnDiv.style.top = "0px";			warnDiv.style.width = "100%";			warnDiv.style.height = "100%";			document.getElementById("wrc_warn_fs").style.display = 'none';			document.getElementById("wrc_warn_cn").style.display = 'none';			if(bFishingSite)				document.getElementById("wrc_warn_fs").style.display = 'block';			else				document.getElementById("wrc_warn_cn").style.display = 'block';			warnDiv.style.display = 'table';		}	}}</script></head>
        <body id="body" class="">
    <div id="page">
    <div id="header">
        <h1>
            <a href="http://concours.open-du-web.fr/" class="header_left"><img src="./Epreuve - Interface du concours des Open du Web_files/logo.png" alt="Interface du concours des Open du Web"></a>
            <a href="http://www.les-argonautes.fr/" class="header_right">Sponsor du concours : <img src="./Epreuve - Interface du concours des Open du Web_files/logo_argonautes.png" alt="Les Argonautes"></a>
            <span class="header_center">Interface du concours des Open du Web</span>
        </h1>
    </div>

    <div id="container">
        <ul id="nav">
		<li><a href="http://concours.open-du-web.fr/epreuves">Tableau des épreuves</a></li>
		<li class="right">
	    Bienvenue telenc_r !
	    <a href="http://concours.open-du-web.fr/epreuves/epreuve/21?logout=1" class="btn">Déconnexion</a>
	</li>
	    </ul>

<script type="text/javascript">
    $(document).ready(function(){
        var start = 1354814359*1000 ;
    });
</script>

<div class="clear"></div>


<ul id="bandeau">
    <li>
        <p>
            Participant :
            <span>
                telenc_r                (EpiLiWeb)            </span>
        </p>
    </li>
    
    <li>
        <p>
            Épreuve en cours : 
                                <span>
                        Développement n° 1                    </span>
                    </p>
    </li>
    
    <li>
        <p>
            Temps passé sur l'épreuve en cours : 
                                <span id="timer">00 : 02 : 33</span>
                    </p>
    </li>
    
    <li>
        <p>
            Temps restant :
            <span class="countdown">02 : 52 : 12</span>
        </p>
    </li>
</ul>

    <script type="text/javascript">
        var startTime = 0;
        var end = 0;
        var diff = 0;
        var reset = false;
        var timerID = 0;
        var start = 1354814359*1000 ;
        
        $(document).ready(function(){
            $("#stop").hide();
            chronoStart();

        });

        function chrono(){
            end = new Date();
            diff = end - start;
            diff = new Date(diff);
            var sec = diff.getSeconds();
            var min = diff.getMinutes();
            var hr = diff.getHours()-1;

            if (sec < 10){
                sec = "0" + sec;
            }
            
            if (min < 10){
                min = "0" + min;
            }
            
            if (hr < 10){
                hr = "0" + hr;
            }
            
            $("#timer").html(hr+" : "+min+" : "+sec);
        }

        function chronoStart(){
            $(".tog").toggle();
            //start = new Date(1354814359*1000 );
            timerID = setInterval(chrono, 500);
        }
    </script>

<div id="content">
    <h2>
        <span>
            Catégorie Développement        </span>
        - Épreuve n° 1
            </h2>

    <div id="consignes">
        
        <h3>Consignes</h3>

        <div class="laConsigne">
                        <p>Les 4 épreuves de développement se suivent et aboutissent à la création partielle d’un moteur de blog.</p>

<p>Un DUMP SQL de la base de données à utiliser tout au long de ces épreuves est téléchargeable à cette adresse : <a href="http://concours.open-du-web.fr/odw/dev-1/odw-t78.sql" target="_blank">odw.sql</a></p>

<p>L’objectif de cette première épreuve est de fournir le module d’authentification du blog, via un formulaire affiché sur une page HTML.</p>

<p>Vous devrez vous aider de la table “users”, qui contient 3 enregistrements correspondant à 3 utilisateurs.</p>

<p>Les identifiants de deux de ces utilisateurs sont :</p>
<ul>
<li>luc.dupuis@odw.fr // mot de passe : 12gf67ml</li>
<li>bertrand.lejeune@odw.fr // mot de passe : 87ns82lz</li>
</ul>

<p>L'algorithme de cryptage des mots de passe en base de données est le suivant : un MD5 du champ user_id concaténé avec le mot de passe.</p>

<p>Une fois l’utilisateur identifié :</p>
<ul>
<li>une session doit être créée</li>
<li>le formulaire de connexion ne doit plus être affiché</li>
<li>la phrase “Bienvenue {Prénom} {Nom}” doit être affichée où {Prénom} est remplacé par le prénom de l’utilisateur identifié, et {Nom} par son nom.</li>
</ul>        </div>


        <div class="left epreuveDetail">
            <h3 class="margintop">Critères de validation</h3>
            <ul>
                                <li>L’authentification par email / mot de passe est fonctionnelle.</li>
                                <li>La session est créée.</li>
                                <li>Le formulaire de connexion est remplacé par la phrase de bienvenue.</li>
                        </ul>

            <h3 class="margintop">Bonus de l'épreuve (+2W)</h3>

            <ul>
                                        <li>Protéger les champs d’une éventuelle injection SQL.</li>
                                        <li>Si l’authentification réussie, afficher également un bouton “Déconnexion” fonctionnel (l’utilisateur est déconnecté et le formulaire d'authentification est de nouveau affiché).</li>
                                        <li>Code propre : le code est correctement indenté et aéré, les conventions de nommage sont cohérentes, les espaces facultatifs sont cohérents, etc.</li>
                                        <li>Code commenté : le fonctionnement du script est expliqué par quelques commentaires utiles ce qui facilite sa prise en main par des tiers.</li>
                                        <li>Code sécurisé : la solution proposée contient des mesures de sécurité efficaces et pertinentes.</li>
                                        <li>Mention spéciale du jury.</li>
                            </ul>

            <!--<h3 class="margintop">Mentions possibles dans cette catégorie (+1W)</h3>

            <ul>
                                    <li>Il n'y a pas de mentions pour cette catégorie.</li>
                            </ul>-->
        </div>
    </div>
    
        <div class="right epreuveDetail">
                <h3>Envoyer au jury</h3>
            <p class="title">Terminé ? Allez, on envoie au jury pour validation !</p>

            <form action="./Epreuve - Interface du concours des Open du Web_files/Epreuve - Interface du concours des Open du Web.htm" method="POST" id="sendReponse" enctype="multipart/form-data">
                            <input type="file" name="fileReponse" id="fileReponse">
                <span class="legend">(fichiers ZIP acceptés)</span>

                <p class="accepted marginbottom">
                    <a href="http://concours.open-du-web.fr/popin/formats-acceptes" class="popin">Voir les formats acceptés</a>
                </p>

                <label for="commentaires">
                    <strong>Précisions pour le jury (facultatif)</strong>
                </label>

                <p>
                    <textarea name="commentaires" id="commentaires"></textarea>
                </p>

                <p class="center">
                    <input type="submit" value="Envoyer !" class="btn" name="submitEpreuve">
                </p>

                <p class="center margintop">
                    <input type="button" value="abandonner l&#39;épreuve" name="giveup" id="giveup">
                    <br>Attention, si tu abandonnes l'épreuve, le score pour cette épreuve sera de -1W.
                </p>
            </form>
        </div>
    
    <div class="clear"></div>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $('#sendReponse').submit(function(e, giveup){
        if( $('#fileReponse').val() == '' && giveup != 'giveup' ){
            if(!confirm( 'Es-tu sûr de ne pas vouloir envoyer un fichier ?' )){
                return false;
            }
        }
    });

    $('#giveup').click( function(){
        if( confirm( 'Es tu sûr de vouloir abandonner cette épreuve ?' )){
            $('#sendReponse').append('<input type="hidden" name="giveup" value="1" />').trigger('submit',['giveup']);
        }
    });
});
</script>


    </div>
</div>
<div id="footer">
    
</div>    <!--
    0,0175    -->
    
        
    
</body></html>